<template>
  <div class="more-container">
    <div class="innercoach">
      <el-row class="topsearch">
        <el-col :span="4">
          <el-input
            v-model="searchword"
            clearable
            placeholder="姓名/手机号/身份证"
          ></el-input>
        </el-col>
      </el-row>
      <!-- 顶部搜索框 -->
      <commonline
        :newText="'教练'"
        @addList="additem"
        @refreshData='refreshData'
        :importUrl='"coach/import"'
        :dUrl='"https://oss.juchehulian.com/Excel/%E6%95%99%E7%BB%83%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xls"'
        @searchlist="searchlist"
        @resetform="resetform"
        :isshowImport="checkPermission(['coachImport'])"
        :isshowAdd="checkPermission(['coachAdd'])"
      ></commonline>
      <!-- 教练弹窗 -->
      <coachDialog
        @confirm="confirm"
        :isshowDialog="isshowCoachDialog"
        :formType="formtype"
        :dialogTitle="dialogtitle"
        @closedialog="closedialog"
      ></coachDialog>
      <!-- 教练列表 -->
      <coachTable
        @deleteitem="deleteitem"
        @changepageTotal="changepageTotal"
        @changepage="changepage"
        @openedit="openedit"
        :tabData="tabList"
      ></coachTable>
    </div>
  </div>
</template>

<script>
// 引入按钮区域
import commonline from '@/components/commonline/commonline'
// 教练添加弹窗
import coachDialog from './component/coachdialog'
//引入教练table
import coachTable from './component/coachTable'
//api
import { getcoachList, deleteItem } from '@/api/coach'
//按钮权限验证
import checkPermission from '@/utils/permission'
export default {
  data() {
    return {
      dialogtitle: '新增教练',
      //是否显示导入按钮
      isshowimportbtn: true,
      //搜索关键字
      searchword: '',
      //是否显示教练弹窗
      isshowCoachDialog: false,
      //页码
      page: 1,
      //翻页总数
      pageTotal: 10,
      //新增还是编辑
      formtype: 0,
      //表格数据
      tabList: {},
    }
  },
  // 注册组件
  components: {
    commonline,
    coachDialog,
    coachTable,
  },
  methods: {
    //按钮权限验证
    checkPermission,
    refreshData(){
       this.getCoachList(this.page, this.pageTotal)
    },
    //总数翻页
    changepageTotal(val) {
      this.pageTotal = val
      this.getCoachList(this.page, this.pageTotal)
    },
    //翻页
    changepage(val) {
      this.page = val
      this.getCoachList(this.page, this.pageTotal)
    },
    //删除
    async deleteitem(id) {
      let params = {
        id,
      }
      //询问客户是否删除
      this.$confirm('您确认要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let data = await deleteItem(params)
          if (data.code == '0000') {
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          }
          //刷新列表
          this.getCoachList(this.page, this.pageTotal)
        })
        .catch(() => {})
    },
    confirm() {
      this.isshowCoachDialog = false
      //刷新列表
      this.getCoachList(this.page, this.pageTotal)
    },
    //获取列表数据
    async getCoachList(page = 1, rows = 10) {
      let params = {
        page,
        rows,
      }
      //如果有搜索关键字追加搜索
      if (this.searchword) {
        params.keyword = this.searchword
      }

      let data = await getcoachList(params)
      this.tabList = data.data
    },
    //编辑打开
    openedit(val) {
      this.$bus.emit('editcoach', val)
      this.dialogtitle = '编辑教练'
      this.formtype = val.type
      this.isshowCoachDialog = true
    },
    //弹窗
    additem() {
      this.dialogtitle = '新增教练'
      this.isshowCoachDialog = true
    },
    //关闭弹窗
    closedialog() {
      this.formtype = 0
      this.isshowCoachDialog = false
    },
    //查询搜索
    searchlist() {
      this.$message({
            type: 'success',
            message: '查询成功!'
          });
      this.getCoachList(this.page, this.pageTotal)
    },
    //重置
    resetform() {
      this.searchword = ''
      this.$message({
        type: 'success',
        message: '已重置!',
      })
      this.getCoachList(this.page, this.pageTotal)
    },
  },
  mounted() {
    //获取列表数据
    this.getCoachList(this.page, this.pageTotal)
  },
}
</script>

<style scoped lang='scss'>
.more-container {
  padding-top: 1px !important;
  .topsearch {
    margin-top: 20px;
  }
}
</style>
